<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<!-- 搜索栏 -->
		<!-- <view class="searchContentOut">
			<view class="searchContent">
				<input type="text" value="" class="searchInput" placeholder="请输入制单号" />
				<view class="searchBg">
					<image src="../../../static/gongzuotai/sousuo@2x.png" class="searchImg" mode=""></image>
				</view>
			</view>
		</view> -->
		<searchInput :inputcontent="inputcontent" @sendData="getInputValue"></searchInput>


		<view class="contentCenterTitle" id="main">
			<text class="contentCenterTitleText">制单号</text>
			<text class="contentCenterTitleText">款号</text>
			<text class="contentCenterTitleText1">操作</text>
		</view>


		<scroll-view scroll-y="true" :style="'height:'+scrollViewHeight+'px'">
			<view class="Content">

				<view class="contentCenterList" v-for="(item,index) in listData"
					:style="{background: (index%2==0?'#EEEEEE':'#F9FCFF')}">
					<text class="contentCenterListText">{{item.orderCode}}</text>
					<text class="contentCenterListText">{{item.styleName}}</text>
					<view class="contentCenterTitleText1" @click="sendDataToParent(item)">
						<text class="contentCenterListText1" >选择</text>
					</view>
				</view>


			</view>
		</scroll-view>





	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import searchInput from '@/components/searchInput.vue'
  import {orderPage} from "@/pages/api/api";

	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},
		data() {
			return {
				inputcontent: '请输入制单号',
				login: '蓝牙打印',

				title: '制单号选择',

				isback: true,

				listData: [],

				scrollViewHeight: 0,
				mainTop: 0,
        queryData: {
          storeId: '',
          tenantId: '',
          orderCode: '',
        }




			}
		},
    onShow() {
      // 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
      let pages = getCurrentPages();
      let currPage = pages[pages.length - 1];
      if (currPage.__data__.isRefresh) {
        // 重新获取数据
        console.log('获取数据');

        this.reUpload()
        // 每一次需要清除，否则会参数会缓存
        currPage.__data__.isRefresh = false
      }
    },
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// 在其他页面或组件中访问
				const app = getApp();
				this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
					.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

		},
    onLoad(){
      const app = getApp();
      this.queryData.storeId = app.globalData.storeId
      this.queryData.tenantId = app.globalData.tenantId
      this.loadData()
    },
		methods: {
      sendDataToParent(item) {
        const pages = getCurrentPages();
        const parentPage = pages[pages.length - 2];
        // 触发父页面的事件
        parentPage.triggerEvent('parentMethod', item);
        // 返回上一页面
        uni.navigateBack();

        uni.$emit("globleEvent", {
          orderData: item
        })
      },
			// 获取输入框的值
			getInputValue(e) {
				console.log('获取输入框的值', e);
        this.queryData.orderCode = e
        this.loadData()
			},
      loadData(){
        orderPage(this.queryData).then(res=>{
          if(res.code==200){
            this.listData = res.rows;
          }
        })
      },
      // 重置数据
      reUpload() {
        // 重置数据
        this.listData = []
        this.queryData.orderCode = ''
        // 表示自动刷新本页
        this.loadData()
      },
		}
	}
</script>

<style>
	.Content{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex-direction: column;
	}
	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}

	.contentCenterListText1 {
	/* 	width: 24%;
		height: 100%; */

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;


		display: flex;
		justify-content: center;
		align-items: center;


		width: 100rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;




	}

	.contentCenterListText {
		width: 38%;
		height: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;


		display: flex;
		justify-content: center;
		align-items: center;

		border-right: #FFFFFF 1rpx solid;
	}

	.contentCenterList {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;




	}


	.contentCenterTitleText1 {
		width: 24%;
		height: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;


		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contentCenterTitleText {
		width: 38%;
		height: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;


		display: flex;
		justify-content: center;
		align-items: center;

		border-right: #FFFFFF 1rpx solid;


	}

	.contentCenterTitle {

		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		margin-top: 20rpx;

	}


	.searchImg {
		width: 36rpx;
		height: 36rpx;
	}

	.searchBg {
		width: 100rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.searchInput {

		width: 590rpx;
		height: 100%;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #BBBBBB;
		line-height: 30rpx;
	}

	.searchContentOut {
		display: flex;
		justify-content: center;
	}

	.searchContent {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;




	}
</style>
